<template>
  <div>
    <el-card>
      <!--企业用户 -->
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
        <br>
         <h3>基本信息</h3>
         <br>
            <el-col :span="12">
              <el-form-item label="手机号码" prop="phone" required >
                <el-input type="text" v-model="ruleForm.phone"  placeholder="请输入手机号码"></el-input>
              </el-form-item>
              <el-form-item label="真实姓名" prop="name" required v-show="ruleForm.userType == '1'">
                <el-input type="text" v-model="ruleForm.name" placeholder="请输入真实姓名"></el-input>
              </el-form-item>
              <el-form-item label="企业名称" prop="name" required v-show="ruleForm.userType == '0'">
                <el-input type="text" v-model="ruleForm.name " placeholder="请输入企业名称"></el-input>
              </el-form-item>
               <template v-if="ruleForm.userType == '1'">
                 <el-form-item label="性别" prop="gender">
                   <el-radio-group v-model="ruleForm.gender">
                     <el-radio label="男" checked="checked" ></el-radio>
                     <el-radio label="女"></el-radio>
                 </el-radio-group>
                 </el-form-item>
              </template>
              <template v-else>
                <el-form-item label="法人姓名" prop="legalPersonName" required>
                <el-input type="text" v-model="ruleForm.legalPersonName" placeholder="请输入法人代表姓名" ></el-input>
              </el-form-item>
              </template>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户类型" prop="resource">
                  <el-radio label="0" v-model="ruleForm.userType">企业用户</el-radio>
                  <el-radio label="1" v-model="ruleForm.userType">个人用户</el-radio>
              </el-form-item>
              <template v-if="ruleForm.userType == '1'">
                <el-form-item label="身份证号" prop="idNum" required>
                <el-input type="text" v-model="ruleForm.idNum" placeholder="请输入身份证号" ></el-input>
                </el-form-item>
              </template>
              <template v-else>
                <el-form-item label="税务登记号" prop="tagRegName" required>
                <el-input type="text" v-model="ruleForm.tagRegName" placeholder="请输入营业执照上的税务登记证号"></el-input>
                </el-form-item>
              </template>
              <el-form-item label="邮箱" prop="email" required>
                <el-input type="text" v-model="ruleForm.email" placeholder="请输入常用邮箱"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      <!-- 银行卡信息 -->
      <!-- <el-row>
         <br>
         <h4>银行卡信息</h4>
         <br>
            <el-col :span="12">
              <el-form-item label="银行卡名称" prop="bank" required>
                <el-input type="text" v-model="ruleForm.bank" autocomplete="off" placeholder="请输入银行卡名称"></el-input>
              </el-form-item>
              <el-form-item label="银行卡号" prop="bankCard" required>
                <el-input type="text" v-model="ruleForm.bankCard" placeholder="请输入银行卡号"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="支行名称" prop="bankName" required>
                <el-input type="text" v-model="ruleForm.bankName" autocomplete="off" placeholder="请输入支行名称"></el-input>
              </el-form-item>
            </el-col>
        </el-row> -->

      <!-- 密码管理部分 -->
        <el-row>
         <br>
         <h3>密码管理</h3>
         <br>
            <el-col :span="12">
              <el-form-item label="密码" prop="pass" required>
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="请设置6-16位数字和字母组成的密码"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="确认密码" prop="pwd" required>
                <el-input type="password" v-model="ruleForm.pwd" autocomplete="off" placeholder="请再次输入登录密码"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <!-- <br> -->
        <el-divider></el-divider>
        <!-- <br> -->
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>

import {addPersonalUser ,addCompanyUser} from '../../http/member'//引入接口

export default {
  name: "Member0",
  data() {
     /* 判断手机号码格式*/
      let phone = (rule, value, callback) => {
        const reg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (value === '') {
          callback(new Error('请输入电话号码'));
        } else if ((!reg.test(value)) && value != '') {
          callback(new Error('请输入正确的电话号码'));
        } else {
          callback();
        }
      };

    //判断法人名字不能为空
    let legalPersonName = (rule, value, callback) => {
        if (this.ruleForm.userType == '0' && value === '') {
          callback(new Error('请输入法人姓名'));
        } else {
          callback();
        }
      };

    //判断真实名字 企业名称 不能为空
    let name = (rule, value, callback) => {
        if (this.ruleForm.userType == '1' && value === '') {
          callback(new Error('请输入姓名'));
        } else if(this.ruleForm.userType == '0' && value === ''){
          callback(new Error('请输入企业名称'));
        }
        else {
          callback();
        }
      };

    //判断身份证格式 18位
    let idNum = (rule, value, callback) => {
        const reg =  /^(\d{18,18}|\d{15,15}|\d{17,17}X)$/;
        if (value === '') {
          callback(new Error('请输入身份证号'));
        } else if ((!reg.test(value)) && value != '') {
          callback(new Error('请输入正确的身份证号'));
        } else {
          callback();
        }
      };

    //判断营业执照上的税务登记证号 15位 全数字
    let tagRegName = (rule, value, callback) => {
        const reg = /^[0-9]{15}$/;
        if (value === '') {
          callback(new Error('请输入税务登记证号'));
        } else if ((!reg.test(value)) && value != '') {
          callback(new Error('请输入正确的税务登记证号'));
        } else {
          callback();
        }
      };

    //判断邮箱
    let email = (rule, value, callback) => {
        const reg = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/;
        if (value === '') {
          callback(new Error('请输入邮箱号'));
        } else if ((!reg.test(value)) && value != '') {
          callback(new Error('请输入正确的邮箱号'));
        } else {
          callback();
        }
      };
    //判断银行卡号 只能是数字 13-19位
    // let bankCard = (rule, value, callback) => {
    //     const reg = /^[0-9]{13,19}$/;
    //     if (value === '') {
    //       callback(new Error('请输入银行卡号'));
    //     } else if ((!reg.test(value)) && value != '') {
    //       callback(new Error('请输入正确的银行卡号'));
    //     } else {
    //       callback();
    //     }
    //   };
    //银行卡名称 支行名称 不能为空
    //  let bank = (rule, value, callback) => {
    //     if (value === '') {
    //       callback(new Error('请输入银行卡名称')); 
    //     } else {
    //       callback();
    //     }
    //   };

      // let bankName = (rule, value, callback) => {
      //   if (value === '') {
      //     callback(new Error('请输入支行名称')); 
      //   } else {
      //     callback();
      //   }
      // };

    //判断密码
      let validatePass = (rule, value, callback) => {
        // var pass =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      let pwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          phone:'',
          email:'',
          // companyName :'',
          legalPersonName:'',
          name:'',
          gender:'',
          idNum:'',
          resource: '',
          tagRegName:'',
          // bank:'',
          // bankCard:'',
          // bankName:'',
          pass: '',
          pwd: '',
          userType: '0'
        },
        rules: {
          phone: [
            { validator: phone, trigger: 'blur' }
          ],
          // companyName :[
          //    { validator: companyName , trigger: 'blur' }
          // ],
          legalPersonName:[
             { validator: legalPersonName, trigger: 'blur' }
          ],
          name:[
             { validator: name, trigger: 'blur' }
          ],
          idNum:[
            { validator: idNum, trigger: 'blur' }
          ],
          tagRegName:[
             { validator: tagRegName, trigger: 'blur' }
          ],
          email:[
             { validator: email, trigger: 'blur' }
          ],
          // bank:[
          //    { validator: bank, trigger: 'blur' }
          // ],
          // bankCard:[
          //    { validator: bankCard, trigger: 'blur' }
          // ],
          // bankName:[
          //    { validator: bankName, trigger: 'blur' }
          // ],
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          pwd: [
            { validator: pwd, trigger: 'blur' }
          ],
        },
        
      };
    },
     methods: {
      submitForm() {
        switch(this.ruleForm.userType) {
          case "0"://企业用户
            addCompanyUser(this.ruleForm)
            .then(res => { //获取返回值
              this.$message({
                 message: res.data.message,
                 type: res.data.code == 20000 ? "success" : "error"//三元运算符
               });
            })
            .catch(err => {
              console.log(err);
              return false;
            })
            break;
            case "1"://个人用户
            addPersonalUser(this.ruleForm)
            .then(res => {
              this.$message({
                 message: res.data.message,
                 type: res.data.code == 20000 ? "success" : "error"//三元运算符
               });
            })
            .catch(err => {
              console.log(err);
              return false;
            })
            break;
        }
        
      },
      resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    }
}

</script>

<style scoped>
</style>